<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>PDF.js 使用说明</title>


</head>

<body>
	<section class="panel">
		<div class="panel-body">
			<h2 class="text-center">PDFjs</h2>
			<h3>
				和 Google Chrome 使用的源自 Foxit 的闭源 PDF 浏览插件不同，PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。 pdf.js 是一个主要用于HTML5 平台上在线阅读PDF文档的小插件，基于JavaScript技术编写而成，无需任何本地技术支持。
				pdf.js是由Mozilla Labs发布的。他们的目标是创建一个通用的，基于标准的网络平台，能够解析和渲染PDF文件，并最终发布一个PDF阅读器扩展，毫无疑问 pdf.js 将被整合入 Gecko 成为 Firefox 的内嵌 PDF
				阅读器，但是具体整合时间表尚未确定
			</h3>
			<ul>
				<li>兼容：主流浏览器</li>
				<li>使用：viewer.html?file='*.paf' //使用viewer解析pdf</li>
			</ul>
		</div>
	</section>
	<section class="panel">
		<div class="panel-body">
			<a href="web/viewer.html">点击查看Dome</a>
			<a href="demo.html">点击查看简单Dome</a>
		</div>
	</section>
	<h3>API</h3>
	<fieldset disabled="disabled">
		<legend>返回文件名</legend>
		<h4>PDFJS.getFilenameFromUrl(path)中文会被系列化</H4>
		<pre>
		var title = PDFJS.getFilenameFromUrl(DEFAULT_URL);
        //decodeURI(title) 反序列化
        document.title = decodeURI(title);
		</pre>
	</fieldset>
	<fieldset>
		<legend>[Promise]返回pdf实例</legend>
		<H4>
			PDFJS.getDocument(path)
		</H4>
		<pre>
		PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
		// you can now use *pdf* here
		});
		</pre>
		<ul>
			<li>
				<h4>返回总页数 pdf.numPages</h4>
				<pre>
					pdf.numPages
				</pre>
			</li>
			<li>
				<h4>
					[Promise]返回单页内容实例（页面引索） pdf.getPage(index) 
				</h4>
				<pre>
				pdf.getPage(1).then(function(page) {
				// you can now use *page* here
				})
				</pre>
				<ul>
					<li>
						<h4>返回页面内容(比例)  page.getViewport(scale);</h4>
					</li>
					<pre>
					var viewport = page.getViewport(scale);
					</pre>
					<p>
						返回内容高度:viewport.height;
					</p>
					<p>
						返回内容宽度:viewport.width;
					</p>
				</ul>
			</li>
			<li>
				<h4>
					[Promise]页面呈现({画布,内容}) page.render(renderContext);
				</h4>
				<pre>
				var scale = 1.5;
				var viewport = page.getViewport(scale);
				
				var canvas = document.getElementById('the-canvas');
				var context = canvas.getContext('2d');
				canvas.height = viewport.height;
				canvas.width = viewport.width;
				
				var renderContext = {
					canvasContext: context,
					viewport: viewport
				};
				page.render(renderContext);
				</pre>
			</li>
		</ul>

	</fieldset>
	<fieldset>
		<legend>
			其他的生成方法
		</legend>
		<h4>
			返回页面显示 PDFJS.PDFPageView()
		</h4>
		<pre>
		PDFJS.PDFPageView({
			container: container,//画布容器
			id: pageNum,//pdf页的引索
			scale: .9,//图片比例
			defaultViewport: page.getViewport(.9),//默认显示内容
			annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory(),
			renderInteractiveForms: true,
		})
		</pre>
		<ul>
			<li>
				<h4>
					设置视图层(内容实例) PDFJS.PDFPageView().setPdfPage(page)
				</h4>
			</li>
			<li>
				<h4>
					[Promise]绘制画布 PDFJS.PDFPageView().draw();
				</h4>

			</li>
		</ul>
	</fieldset>


</body>

</html>